<template>
  <v-container fluid class="statistics-wrapper">
    <v-layout row wrap class="px-5">
      <v-flex md12>
        <v-btn icon @click="$router.push('/game/gameroom')">
          <v-icon>keyboard_backspace</v-icon>
        </v-btn>
        <span class="title">房间详情</span>
      </v-flex>
    </v-layout>
    <v-divider></v-divider>
    <v-layout>
      <v-flex md12>
        <!-- 显示房间详细信息 -->
        <v-flex md12 class="my-4">
          <v-layout>
            <v-flex md2 class="px-5">
              <v-avatar size="72" tile>
                <img :src="roomInfo.iconUrl" alt="">
              </v-avatar>
            </v-flex>
            <v-flex md4>
              <div class="headline">房间号： {{roomInfo.id}}</div>
              <div class="title mt-2">玩法： {{roomInfo.ruleType}}</div>
            </v-flex>
            <v-flex md2>
              <v-btn @click="dismiss" class="title" prepend-icon="block" large dark round color="red accent-4">
                解散房间
                <v-icon class="pl-3">warning</v-icon>
              </v-btn>
            </v-flex>
          </v-layout>

        </v-flex>
        <v-flex md12 row justify-center>
          <v-flex md12>
            <v-card>
              <v-data-table :loading="showProgress" :headers="detailHeaders" :items="detailsData" hide-actions class="elevation-2">
                <v-progress-linear slot="progress" color="teal" height="5"  indeterminate></v-progress-linear>
                <template slot="items" slot-scope="props">
                  <td class="text-xs-center">
                    <v-avatar size="36">
                      <img :src="props.item.headUrl" alt="">
                    </v-avatar>
                  </td>
                  <td class="text-xs-center subheading">{{ props.item.lftid }}</td>
                  <td class="text-xs-center subheading">{{ props.item.nickname }}</td>
                  <td class="text-xs-center subheading">
                    <v-btn flat round dark color="red" class="mx-1" @click="remove(props.item)">
                      <span class="mx-1">移除</span>
                      <v-icon color="red">delete_forever</v-icon>
                    </v-btn>
                  </td>
                </template>
                <!-- 没有数据时显示的提示 -->
                <template slot="no-data">
                  <div class="text-md-center">
                    <v-icon color="yellow darken-3">warning</v-icon>
                    <span class="subheading">暂无数据</span>
                  </div>
                </template>
              </v-data-table>
            </v-card>
          </v-flex>
        </v-flex>
      </v-flex>
      <v-dialog v-model="modal" persistent max-width="290">
        <v-card>
          <v-card-title class="headline">注意!</v-card-title>
          <v-card-text class="title">{{modalText}}</v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="red darken-1" flat @click.native="modal = false">取消</v-btn>
            <v-btn color="green darken-1" flat @click.native="confirmModal">确认</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </v-layout>
  </v-container>
</template>

<script>
import * as game from "../../api/game";
const ICON = {
  "1": "classic-bull.png",
  "2": "fight-bull.png",
  "5": "dianzi-bull.png",
  "8": "runfast.png",
  "4": "jinhua.png",
  "3": "hz-majiang.png",
  "11": "pj-majiang.png",
  "10": "cs-majiang.png",
  "6": "sangong.png"
};
export default {
  data: () => ({
    tabs: null,
    btnToggle: null,
    showProgress: false,
    dialog: false,
    modal: false,
    modalText: "",
    roomid: 0,
    roomUid: "",
    roomInfo: {
      id: 0,
      ruleType: null,
      state: null,
      gameId: null,
      iconUrl: null
    },
    detailHeaders: [
      { text: "头像", value: "headUrl", align: "center", sortable: false },
      { text: "玩家ID", value: "method", align: "center", sortable: false },
      { text: "昵称", value: "status", align: "center", sortable: false },
      { text: "操作", value: "actions", align: "center", sortable: false }
    ],
    detailsData: [],
    removeItem: null
  }),
  mounted() {
    // 获取到对应的游戏类型
    // this.VueEventBus.$on("areaCodeChange", () => {
    //   this.initialize();
    // });
    this.roomInfo.id = +this.$route.params.id.replace(":", "");
    this.roomInfo.ruleType = decodeURI(this.$route.query.ruleType);
    this.roomInfo.gameId = this.$route.query.gameId;
    this.roomInfo.iconUrl = `img/gameicon/${ICON[this.roomInfo.gameId]}`;
    // this.getRoomDetails(this.roomid);
    // this.initialize();
    this.getRoomDetails();
    this.$nextTick(() => {
      $Vue.$off("refreshPage");
      $Vue.$on("refreshPage", () => {
        this.getRoomDetails();
      });
      $Vue.$off("areaCodeChange");
      $Vue.$on("areaCodeChange", () => {
        this.getRoomDetails();
      });
    });
  },
  methods: {
    // 获取房间详情
    getRoomDetails() {
      const opt = { id: this.roomInfo.id };
      game.getRoomDetails.r(opt).then(({ data }) => {
        let d = data.data;
        console.log(d);
        if (data.result === 0) {
          this.detailsData = data.data;
        } else {
        }
      });
    },
    removePlayer() {
      const opt = {
        roomNo: this.roomInfo.id,
        type: 2,
        uid: this.removeItem.uid
      };
      game.removePlayer.r(opt).then(({ data }) => {
        this.getRoomDetails();
        $Vue.$emit("toggleSnackbar", {
          text: data.message
        });
        this.modal = false;
      });
    },
    dismissRoom() {
      const opt = { roomNo: this.roomInfo.id, type: 1 };
      game.dismissRoom.r(opt).then(({ data }) => {
        $Vue.$emit("toggleSnackbar", {
          text: data.message
        });
        if (data.result === 0) {
          this.$router.push("/game/gameroom");
        } else if (data.message === "该房间已结束游戏！") {
          this.$router.push("/game/gameroom");
        }
        this.modal = false;
      });
    },
    initialize() {
      this.limit = 5;
      this.offset = 0;
      // this.tabs = 1;
      // 初始化页面信息
      // this.getRoomInfo(this.limit, this.offset, 1);
      this.detailsData = [
        {
          headUrl: "https://countryflags.io/cn/flat/32.png",
          lftid: 410125,
          nickname: "啊哈"
        },
        {
          headUrl: "https://countryflags.io/tw/flat/32.png",
          lftid: 236514,
          nickname: "嗯哼"
        }
      ];
    },
    remove(item) {
      this.modal = true;
      this.removeItem = item;
      this.modalText = "确认移除该玩家吗?";
    },
    dismiss() {
      this.modal = true;
      this.modalText = "确认解散该房间吗?";
    },
    confirmModal() {
      if (this.modalText === "确认解散该房间吗?") {
        this.dismissRoom();
      } else {
        this.removePlayer();
      }
    }
  }
};
</script>

<style lang="less" scoped>
</style>

